{extend name="layout" /}
{block name="page"}
<div class="layui-card">
    <div class="tools">
        <div class="btns">
            <button class="layui-btn layui-btn-normal open" url="{:url('role/add')}">添加角色</button>
        </div>
    </div>
    <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>
{/block}
{block name="js"}
<script type="text/html" id="lockTpl">
    {{#  if(d.lock == 0){ }}
    <span>正常</span>
    {{# }else{ }}
    <span class="danger">锁定</span>
    {{# } }}
</script>
<script type="text/html" id="toolBar">
    {{# if(d.id>1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="auth">权限</a>
    {{# } }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看</a>
    {{# if(d.id>1){ }}
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{# } }}
</script>
<script>
    layui.config({
        base: '__STATIC__/js/'
    }).use(['app'], function () {
        var app=layui.app;
        var table=layui.table;
        table.render({
            elem: '#dataTable'
            ,url: window.location.href //数据接口
            ,cols: [[ //表头
                {field: 'id', title: 'ID', sort: true, width: 80, align: 'center'}
                , {field: 'name', title: '角色名称', align: 'center', width: 120}
                , {field: 'description', title: '描述', align: 'center', width: 400}
                , {field: 'admin_count', title: '用户数', align: 'center', width: 100}
                , {field: 'lock', title: '状态', align: 'center', templet: '#lockTpl', width: 100}
                , {field: 'lock_msg', title: '原因', align: 'center', width: 400}
                , {title: '操作', toolbar: '#toolBar', width: 220}
            ]]
        });
        //监听排序
        table.on('edit(dataTable)', function(obj){
            app.post({
                sort: obj.value,
                id: obj.data.id
            }, 0, '{:url("node/sort")}');
        });
        //监听工具条
        table.on('tool(dataTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'detail') {
                app.open('{:url("user/index")}?role_id=' + data.id, '查看用户：' + data.name);
            } else if (layEvent === 'del') {
                layer.confirm('真的要删除吗?', function (index) {
                    layer.close(index);
                    app.post({
                        id: data.id
                    }, 0, '{:url("role/del")}');
                });
            } else if (layEvent === 'edit') {
                app.open('{:url("role/edit")}?id=' + data.id, '编辑');
            } else if (layEvent === 'auth') {
                app.open('{:url("role/auth")}?id=' + data.id, '权限设置：' + data.name, '600px')
            }
        });
    });
</script>
{/block}